<template>
	<view >
		<u-swiper :list="product.photos" 
			@change="e => currentSwiperNum = e.current"
			autoplay="false"
			indicatorStyle="right:20px"
			radius="0"
			height="750rpx"
		>
			<view slot="indicator" class="indicator-num">
				<text>{{ currentNum + 1 }}/{{ product.photos.length }}</text>
			</view>
		</u-swiper>
		<view class="product-master">
			<view class="sale-box">
				<view class="price-box">
					<view class="price"><text class="label">￥</text>39.0</view>
				</view>
				<view class="bought">已售{{ product.saleNum }}</view>
			</view>

			<view class="title">{{ product.title }}</view>
			
			<view v-if="product.points.length > 0" class="point-list">
				<view class="point" v-for="(item, index) in product.points" :key="index">
					{{ item }}
				</view>
			</view>
			
		</view>
			
		<u-gap height="10px" bgColor="#f4f4f4"></u-gap>
		
		<view class="sku-box">
			<view class="selected">
				选择：{{ currentSku.values }}
			</view>	
			<view class="sku-opts" @click="openSpecsPane('select')">
				<view class="sku-list">
					<view class="sku" v-for="sku in product.skuList.slice(0, 3)" :key="sku.id">
						<u--image :src="sku.photo" width="36px" height="36px" ></u--image>
					</view>
					<view class="tips">共{{ product.skuList.length }}种规格可选</view>
				</view>
				<u-icon name="arrow-right" size="14" color="#ccc"></u-icon>
			</view>
		</view>
		
		<u-gap height="10px" bgColor="#f4f4f4"></u-gap>
			
		<view v-if="product.commentList.length > 0" class="comment-box">
			<view class="head">
				<view class="name">评价</view>
				<view class="more" @click="gotoCommentList">
					<text style="margin:0 3px;">{{ product.commentNum }}条评价</text>
					<u-icon name="arrow-right" color="#acacac" size="11"></u-icon>
				</view>
			</view>
			<view v-for="comment in product.commentList" :key="comment.id" class="comment-item">
				<view class="user-info">
					<u--image :src="comment.avatar" width="24px" height="24px" shape="circle"></u--image>
					<text class="username">{{ comment.nickname }}</text>
					<u-rate :value="comment.rate" size="12" readonly></u-rate>
				</view>
				<view class="text">{{ comment.content }}</view>
			</view>
		</view>
			
		<u-gap height="10px" bgColor="#f4f4f4"></u-gap>
			
		<view class="poster-box">
			<view class="head">
				<view class="name">商品详情</view>
			</view>
			<view class="poster-content">
				<u-parse :content="product.content" :tagStyle="posterStyle"></u-parse>
			</view>	
		</view>
		
		<u-popup :show="showSpecsPane" mode="bottom" @close="closeSpecsPane" :closeable="true" :round="15">
			<view class="specs-select-box">
				<view class="product-summary">
					<u--image :src="product.cover" width="64px" height="64px"></u--image>
					<view class="info">
						<view class="title">{{ product.title }}</view>
						<view class="price"><view class="lable">￥</view>{{ currentSku.price }}</view>
						<view class="store">库存：{{ currentSku.storeNum }}件</view>
					</view>	
				</view>
				<view v-if="product.specsList.length > 0" class="specs-list">
					<view v-for="(specs, index) in product.specsList" :key="index" class="specs-item">
						<view class="specs-name">{{ specs.name }}</view>
						<view class="specs-value-list">
							<view v-for="(value, subIndex) in specs.values" :key="subIndex" @click="slecteSpecs(index, subIndex)">
								<view v-if="specIndexes[index] == subIndex" class="specs-value specs-value-active">{{ value }}</view>
								<view v-else class="specs-value">{{ value }}</view>
							</view>
						</view>	
					</view>
				</view>
				<view class="meter-box">
					<view class="label">购买数量</view>
					<x-setpper v-model="currentSku.buyNum" @change="changeBuyNum"></x-setpper>
				</view>
				<div class="handle-box">
					<view v-if="specsPaneIdent=='cart'" class="btn" @click="addCart()">加入购物车</view>
					<view v-else-if="specsPaneIdent=='buy'" class="btn" @click="buy()">立即购买</view>
					<view v-else class="cart-buy-btn-group">
						<view class="cart-btn" @click="addCart()">加入购物车</view>
						<view class="buy-btn" @click="buy()">立即购买</view>
					</view>
				</div>	
			</view>
		</u-popup>
			
		<view class="toolbar">
			<view class="nav-box">
				<view class="nav-btn" @click="goHome">
					<u-icon name="home" size="24"></u-icon>
					<view class="label">首页</view>
				</view>
				<view class="nav-btn" @click="goService">
					<u-icon name="chat" size="24"></u-icon>
					<view class="label">客服</view>
				</view>
				<view class="nav-btn" @click="goCart">
					<u-icon name="shopping-cart" size="24"></u-icon>
					<view class="label">购物车</view>
					<view v-if="cartProductNum > 0" class="num">{{ cartProductNum }}</view>
				</view>
			</view>
			<view class="cart-buy-btn-group">
				<view class="cart-btn" @click="openSpecsPane('cart')">加入购物车</view>
				<view class="buy-btn" @click="openSpecsPane('buy')">立即购买</view>
			</view>	
		</view>
		
		<login-panel :visible="loginPanelVisible" @close="closeLoginPanel"></login-panel>	
	</view>	
</template>

<script>
import LoginPanel from "@/components/LoginPanel.vue";	
import { XSetpper } from "@/components/XSetpper.vue";	
import { productDetail, productSku } from "@/api/shop.js";
import { cartItemNum, cartAdd } from "@/api/cart.js";

export default {
	components: {
		XSetpper,
		LoginPanel
	},
	data() {
		return {
			loginPanelVisible: false,
			product: {
				id: 0,
				photos: [],
				content: '',
				points: [],
				specsList: [],
				skuList: [],
				commentNum: 0,
				commentList: []
			},
			currentSwiperNum: 0,
			posterStyle: {
				img: "display:block;"
			},
			showSpecsPane: false,
			specsPaneIdent: 'select',
			specIndexes: [],
			currentSku: {
				id: 0,
				indexes: '',
				values: '',
				price: 0,
				storeNum: 0,
				buyNum: 1
			},
			cartProductNum: 0
		}
	},
	onLoad(options) {
		if(options.id !== undefined && options.id > 0) {
			this.product.id = options.id;
			this.init();
		}
	},
	methods: {
		init() {
			productDetail(this.product.id).then(res=>{
				this.product = res.data.product;
				console.log(this.product);
				
				if(this.product.specsList.length > 0) {
					// 多规格，默认选中每种规格第1项
					for(let i=0; i<this.product.specsList.length; i++) {
						this.specIndexes[i] = 0;	
					}
				} else {
					// 单规格
					this.specIndexes[0] = 0;	
				}
				
				this.selectSku();
			});
			this.getCartItemNum();
		},
		getCartItemNum() {
			cartItemNum().then(res=>{
				this.cartProductNum = res.data.num;
			});	
		},
		openSpecsPane(ident) {
			if(!this.isLogin()) {
				this.loginPanelVisible = true;
				return;
			}
			
			this.specsPaneIdent = ident;
			this.showSpecsPane = true;
		},
		closeSpecsPane() {
			this.showSpecsPane = false;
		},
		slecteSpecs(i, j) {
			this.specIndexes[i] = j;			
			this.selectSku();
		},
		selectSku() {
			let indexes = this.specIndexes.join('_');
			this.product.skuList.forEach(item=>{
				if(item.indexes == indexes) {
					this.currentSku = {
						id: item.id,
						indexes: indexes,
						values: item.name,
						price: item.price,
						storeNum: item.storeNum,
						buyNum: 1
					};
				}
			});
		},
		changeBuyNum(e) {
			if(e.value > this.currentSku.storeNum) {
				uni.showToast({
					icon: none,
					title: '库存不存'
				});
				return;
			} 
			this.currentSku.buyNum = e.value;
		},
		goHome() {
			uni.switchTab({
				url: '/pages/shop/index'
			});
		},
		goService() {
			console.log('==== 联系客服');
		},
		goCart() {
			console.log("==== go cart");
			uni.switchTab({
				url: '/pages/cart/index'
			});
		},
		closeLoginPanel() {
			this.loginPanelVisible = false;
		},
		addCart() {
			cartAdd(this.product.id, this.currentSku.id, this.currentSku.buyNum).then(()=>{
				this.toast('商品已加入购物车');
				this.getCartItemNum();
				this.closeSpecsPane();
			});
		},
		buy() {
			let params = [{
				cartId: 0,
				skuId: this.currentSku.id,
				num: this.currentSku.buyNum
			}];
			uni.navigateTo({
				url: "/pages/uc/settle?params=" + JSON.stringify(params)
			});	
		},
		gotoCommentList() {
			uni.navigateTo({
				url: "/pages/shop/ProductCommentList?id=" + this.product.id
			});
		}
	}
}	
</script>

<style lang="less">
.indicator-num {
	font-size: 11px;
	color: #fff;
}
	
.product-master {
	margin: 24rpx;
	
	.sale-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		margin: 24rpx 0;
		
		.price-box {
			.price {
				font-size: 18px;
				font-weight: bold;
				color: #d7142b;
				
				.label {
					font-size: 12px;
					font-weight: bold;
				}
			}
		}
		
		.bought {
			font-size: 11px;
			color: #ccc;
		}
	}
	
	.title {
		margin: 12rpx 0;
		font-size: 15px;
		font-weight: bold;
		color: #181818;
	}
	
	.point-list {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 24rpx 0;
		padding: 24rpx 0;
		
		.point {
			padding: 2px 10px;
			margin-right: 10px;
			border-radius: 5px;
			background: #f4f4f4;
			color: #8c8c8c;
			font-size: 12px;
		}
	}
}

.sku-box {
	display: flex;
	flex-direction: column;
	padding: 24rpx;
	
	.selected {
		font-size: 12px;
		color: #5c5c5c;
		margin-bottom: 10px;
	}
	
	.sku-opts {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		
		.sku-list {
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.sku {
				margin: 0 10px 0 0;
			}
			
			.tips {
				font-size: 12px;
				color: #999;
				background: #f4f4f4;
				border-radius: 5px;
				height: 24px;
				line-height: 24px;
				padding: 0 10px;
			}
		}
	}
	
}
	
.comment-box {
	padding: 24rpx;
	
	.head {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding: 6px 0;
		
		.name {
			font-size: 14px;
			color: #1e1e1e;
		}
		
		.more {
			display: flex;
			flex-direction: row;
			align-items: center;
			font-size: 12px;
			color: #acacac;
		}
	}
	
	.comment-item {
		padding: 10px 0;
		
		.user-info {
			display: flex;
			flex-direction: row;
			align-items: center;
			
			.username {
				margin: 0 8px;
				font-size: 12px;
				color: #5c5c5c;
			}
		}
		
		.text {
			margin: 5px 0;
			font-size: 12px;
			line-height: 150%;
			color: #3c3c3c;
		}
	}
}
	
.poster-box {
	.head {
		font-size: 12px;
		font-weight: bold;
		color: #181818;
		padding: 24rpx;
	}
}
	
.toolbar {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	position: fixed;
	bottom: 0;
	background: #fff;
	z-index: 998;
	width: 100%;
	padding: 12rpx 24rpx 12rpx 6rpx;
	box-sizing: border-box;
	border-top: 1px solid #eee;
	
	.nav-box {
		display: flex;
		width: 280rpx;
		.nav-btn {
			display: flex;
			flex-direction: column;
			width: 80rpx;
			align-items: center;
			position: relative;
			margin-right: 5px;
			
			.label {
				font-size: 10px;
				color:#acacac;
			}
			
			.num {
				width: 14px;
				height: 14px;
				border-radius: 7px;
				background: #d7142b;
				color: #fff;
				position: absolute;
				right: 0;
				top: 0;
				font-size: 10px;
				text-align: center;
				opacity: 0.9;
			}
		}
	}
}

.cart-buy-btn-group {
	display: flex;
	flex-direction: row;
	width: 400rpx;
	height: 36px;
	border-radius: 25px;
	font-size: 14px;
	overflow: hidden;
	justify-content: center;
	align-items: center;
	
	.cart-btn {
		display: flex;
		width: 200rpx;
		height: 36px;
		align-items: center;
		justify-content: center;
		color: #fff;
		background: #333;
	}
	
	.buy-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 200rpx;
		height: 36px;
		color: #fff;
		background: #d7142b;
	}
}
	
.specs-select-box {
	padding: 24rpx;
	
	.product-summary {
		display: flex;
		flex-direction: row;
		margin: 12rpx 48rpx 0 0;
		
		.info {
			display: flex;
			flex-direction: column;
			margin-left: 24rpx;
			
			.title {
				font-size: 14px;
				color: #333;
				margin-bottom: 10px;
			}
			
			.price {
				display: flex;
				flex-direction: row;
				font-size: 16px;
				color: #d7142b;
				
				.label {
					font-size: 12px;
				}
			}
			
			.store {
				font-size: 12px;
				color: #acacac;
			}
		}
	}
	
	.specs-list {
		.specs-item {
			padding: 10px 0;
			
			.specs-name {
				margin: 5px 0;
				font-size: 13px;
				color: #8c8c8c;
			}
			
			.specs-value-list {
				display: flex;
				flex-direction: row;
				flex-wrap: wrap;
				color: #333;
				
				.specs-value {
					padding: 2px 10px;
					border-radius: 10px;;
					font-size: 12px;
					background: #f4f4f4;
					border: 1px solid #f4f4f4;
					white-space: nowrap;
					margin: 5px 15rpx 5px 0;
				}
				
				.specs-value-active {
					color: #d7142b;
					border: 1px solid #d7142b;
				}
			}
		}
	}
	
	.meter-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding: 15px 0;
		align-items: center;
		
		.label {
			font-size: 13px;
			color: #8c8c8c;
		}
	}
	
	.handle-box {
		display: flex;
		justify-content: center;
		padding: 24rpx;
		
		.btn {
			display: flex;
			width: 480rpx;
			height: 36px;
			align-items: center;
			justify-content: center;
			background: #d7142b;
			color: #fff;
			border-radius: 20px;
		}
	}
}	
</style>